<template>
    <view class="apply-detail">
        <view class="apply-detail-box">
            <view class="apply-detail-title">
                {{detail.title}}
                <view style="font-size: 28rpx;font-weight: 500;">{{detail.requestCode}}</view>
            </view>
            <!-- <view>
                {{ detail.content }}
            </view> -->
            <view class="apply-progress">
                <view class="progress-title">
                    进度信息
                </view>
                <view class="progress-content">
                    <u-time-line>
                        <u-time-line-item v-for="(process, index) in processList" :key="index">
                            <!-- 此处自定义了左边内容，用一个图标替代 -->
                            <template v-slot:content>
                                <view>
                                    <view class="u-order-title">{{process.title}}</view>
                                    <view class="u-order-time">{{process.handleTime}}</view>
                                </view>
                            </template>
                        </u-time-line-item>
                    </u-time-line>
                </view>
            </view>
            <view class="tips">
                <view>
                    温馨提示
                </view>
                <view>
                    您当前的诉求进度为:{{ processList[processList.length -1]?.title }}
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { getOrderDetail, process } from '@/api'
const id = ref('')
const detail = ref({})
const processList = ref([])
const typeOptions = {
    1: '合规建设指导',
    2: '合同纠纷',
    3: '劳动争议',
    4: '其他',
    5: '政法系统领导面对面',
    6: '审判监督',
    7: '法制体检',
    8: '法律援助',
    9: '公证服务',
    10: '检察听证',
    11: '其他'
}
const stateFormat = {
    0: '待受理',
    1: '受理中',
    2: '已完结'
}
const getDetail = async () => {
    const res = await getOrderDetail(id.value)
    console.log(res, 'res')
    detail.value = res
}
const getProcess = async () => {
    const res = await process(id.value)
    processList.value = res
}
onLoad((props:any) => {
    if (props.id) {
        id.value = props.id
        getDetail()
        getProcess()
    }
})
</script>

<style lang="scss">
    .apply-detail{
        height: 100vh;
        width: 100vw;
        background: url('https://7072-prod-3gyndjxs02add8b0-1379203838.tcb.qcloud.la/static/img3.png') no-repeat left top;
        background-size: 100% 100%;
        padding: 24rpx;
        display: flex;
        .apply-detail-box{
            flex: 1;
            margin-top: 72rpx;
            background: #f2f2f2;
            border-radius: 36rpx;
            display: flex;
            flex-direction: column;
            .apply-detail-title{
                text-align: center;
                margin: 64rpx 0;
                color: #19428A;
                font-size: 48rpx;
                font-weight: bold;
            }
            .apply-progress{
                padding: 0 64rpx;
                flex: 1;
                .progress-title{
                    font-size: 44rpx;
                    font-weight: 600;
                    margin-bottom: 24rpx;
                }
                .u-time-axis::before{
                    border-left: 4px solid #19428A;
                    left: -1px;
                }
                .u-dot{
                    height: 18px;
                    width: 18px;
                    border-radius: 9px;
                    background: #19428A;
                }
                .u-order-title{
                    font-size: 36rpx;
                    font-weight: 600;
                }
                .u-order-time{
                    color: #8c8c8c;
                }
            }
            .tips{
                padding: 120rpx 64rpx;
                border-top: 1px solid #dcdddd;
                color: #8c8c8c;
            }
        }
    }
</style>